<template>
	<swiper 
		class="screen-swiper cu-swiper" 
		:class="dotStyle?'square-dot':'round-dot'" 
		:indicator-dots="true" 
		:circular="true"
		:autoplay="true" 
		interval="5000" 
		duration="500" 
		@change="cardSwiper" 
		indicator-color="#8799a3"
		indicator-active-color="#0081ff">
		<swiper-item 
			v-for="(item,index) in swiperList" 
			:key="item.id">
			<image
				:src="item.url" 
				:style="{
					minHeight: '400px'
				}"
				mode="aspectFill" >
			</image>
		</swiper-item>
	</swiper>
</template>

<script>
    export default {
		name: 'cu-swiper',
		props: {
			dotStyle: {
				type: Boolean,
				default: () => true
			},
			swiperList: {
				type: Array,
				default: () => []
			}
		},
        data() {
            return {
				cardCur: 0,
            }
        },
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
		}
    }
</script>

<style lang="scss" scoped>
	.cu-swiper {
		height: 100%;
		border-radius: 4px;
		overflow: hidden;
		min-height: 400px;
		border: 7px solid #ffffff47;
	}
</style>


